<template>
	<div class="w1024-wrap">
		<div class="page">
			<div class="group-info flex flex-align-center flex-justify-between">
				<div>
					<span class="title">增值业务</span>
				</div>
				<div>
					<a v-if="type==1" href="https://xnh.xnhkfpt.com/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/images/uploadFiles/fourhundredadd/1.jpg" download="" class="link">400电话增值业务介绍</a>
					<a v-if="type==2" href="https://xnh.xnhkfpt.com/free/download/exportImg?url=https://img.xnhkfpt.com/lvdata/images/uploadFiles/fourhundredadd/2.jpg" download="" class="link">400电话增值业务介绍</a>
					<el-button type="primary" @click="goOrder">增值业务订购</el-button>
				</div>

			</div>
			<template v-if="list.length">
				<div class="table-wrap">
					<el-table ref="table" v-loading="loading" size="middle" :data="list" style="width: 100%">
						<el-table-column prop="business_name" min-width="80" label="短信名称"></el-table-column>
						<el-table-column prop="create_time" label="提交时间" min-width="130">
							<template slot-scope="scope">
								<span>{{scope.row.create_time||'-'}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="80" label="状态">
							<template slot-scope="scope">
								<span class="red" v-if="scope.row.appeal_status==3">申诉中</span>
								<template v-else>
									<span class="red" v-if="scope.row.order_status_num==1">待支付</span>
									<span class="red" v-if="scope.row.order_status_num==2">待受理</span>
									<span class="red" v-if="scope.row.order_status_num==3">订购成功</span>
									<span class="red" v-if="scope.row.order_status_num==8">已退款</span>
									<span class="red" v-if="scope.row.order_status_num==9">订购失败</span>
									<span class="red" v-if="scope.row.order_status_num==20">已取消</span>
									<span class="red" v-if="scope.row.order_status_num==21">重新提交</span>
									<span class="red" v-if="scope.row.order_status_num==22">申诉失败</span>
								</template>
							</template>
						</el-table-column>
						<el-table-column min-width="80" label="订单修改">
							<template slot-scope="scope">
								<span v-if="scope.row.channeledit==0">未操作</span>
								<span v-if="scope.row.channeledit==1">有修改</span>
								<span v-if="scope.row.channeledit==2">已更新</span>
							</template>
						</el-table-column>
						<el-table-column label="订单金额" min-width="90">
							<template slot-scope="scope">
								<span>{{scope.row.fee/100}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="优惠金额" min-width="80">
							<template slot-scope="scope">
								<span>{{(scope.row.ticketfee||0)/100}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="实付金额" min-width="80">
							<template slot-scope="scope">
								<span>{{(scope.row.realfee||0)/100}}元</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="140">
							<template slot-scope="scope">
								<div class="flex">
									<img @click="seeDetail(scope.row,scope.$index)" title="详情" :src="detail" class="operate-icon" />
									<img v-if="[3,9,22].indexOf(scope.row.order_status_num)>-1&&(!scope.row.appeal_status||scope.row.appeal_status==2)&&scope.row.appealtime<3" @click="openAppeal(scope.row)" title="申诉(最多申诉3次)" :src="appeal" class="operate-icon" />
									<img v-if="scope.row.order_status_num==1" @click="openPay(scope.row)" title="支付" :src="renew" class="operate-icon" />
									<template v-if="scope.row.appeal_status!=3&&scope.row.appeal_status!=2&&scope.row.appealtime<3">
										<img v-if="scope.row.order_status_num==9&&[5,8,10,11,13,14,15].indexOf(scope.row.business_type)==-1" @click="reOrder(scope.row)" title="重新提交" :src="reOrderIcon" class="operate-icon" />
										<el-popconfirm class="left"  v-if="scope.row.order_status_num==9&&[5,8,10,11,13,14,15].indexOf(scope.row.business_type)>-1" confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" @confirm="reOrder(scope.row)" title="确定重新提交吗？">
											<img :src="reOrderIcon" title="重新提交" slot="reference" class="operate-icon" />
										</el-popconfirm>
									</template>
									<el-popconfirm class="left" v-if="scope.row.order_status_num==1" confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info" icon-color="red" @confirm="cancel(scope.row)" title="确定取消该订单吗？">
										<img :src="cancelIcon" title="取消" slot="reference" class="operate-icon" />
									</el-popconfirm>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<el-pagination :current-page="this.searchData.pagenow" class="text-center" layout="prev, pager, next,sizes" prev-text="上一页" next-text="下一页" @size-change="pageSizeChange" @current-change="currentPageChange" :total="totalCount">
				</el-pagination>
			</template>
			<no-data v-if="!loading&&!list.length"></no-data>
		</div>

		<el-dialog title="查看详情" :visible.sync="detailVisible" width="600px">
			<div class="dialog-content">
				<div class="clear">
					<div class="form-item left" style="width: 60%;">
						<p class="form-item-title">订单编号：</p>
						<div class="form-item-content">
							<span>{{obj.ordernum}}</span>
						</div>
					</div>
					<div class="form-item left" style="width: 40%;">
						<p class="form-item-title">当前状态：</p>
						<div class="form-item-content">
							<span class="red" v-if="obj.order_status_num==1">待支付</span>
							<span class="red" v-if="obj.order_status_num==2">待受理</span>
							<span class="red" v-if="obj.order_status_num==3">订购成功</span>
							<span class="red" v-if="obj.order_status_num==8">已退款</span>
							<span class="red" v-if="obj.order_status_num==9">订购失败</span>
							<span class="red" v-if="obj.order_status_num==20">已取消</span>
							<span class="red" v-if="obj.order_status_num==21">重新提交</span>
							<span class="red" v-if="obj.order_status_num==22">申诉失败</span>
						</div>
					</div>
				</div>
				<div class="record-list">
					<p class="record-item" v-for="item in recordList">{{item.operate_time}} {{item.remark}}</p>
				</div>
				<div class="form-item">
					<p class="form-item-title">订购业务：</p>
					<div class="form-item-content">
						<span>{{obj.business_name}}</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type==1||obj.business_type==9">
					<p class="form-item-title">功能费：</p>
					<div class="form-item-content">
						<span v-if="!obj.functionfee">0元（400开通首年，功能费0元；次年收取24元/年）</span>
						<span v-else>24元</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">{{obj.business_type!=1&&obj.business_type!=9?'产品价格：':'短信套餐：'}}</p>
					<div class="form-item-content">
						<span v-if="obj.business_type!=1&&obj.business_type!=9">{{obj.fee/100}}元/年</span>
						<span v-else>{{obj.gj_type_desc}}</span>
					</div>
				</div>
				<template v-if="obj.business_type==2||obj.business_type==4">
					<div class="form-item">
						<p class="form-item-title">铃音文件：</p>
						<div class="form-item-content">
							<span class="detail-info2">{{obj.ring_file_name}}</span>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">彩铃内容：</p>
						<div class="form-item-content">
							<span class="detail-info2">{{obj.content}}</span>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title" style="line-height: 20px;padding-top: 8px;">资质文件：<br/>(非必填)</p>
						<div class="form-item-content" style="padding-top: 8px;">
							<div class="img-wrap">
								<img @click="viewImage(obj.zz_file)" :src="obj.zz_file" />
							</div>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==3||obj.business_type==6||obj.business_type==7">
					<div class="form-item">
						<p class="form-item-title">致电导语：</p>
						<div class="form-item-content">
							<span class="detail-info2">{{obj.content}}</span>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">转接设置：</p>
						<div class="form-item-content" style="width: auto;">
							<el-table border size="mini" :data="obj.speakset" style="width: 100%">
								<el-table-column min-width="60" prop="tnum" label="按键号"></el-table-column>
								<el-table-column min-width="110" prop="tcontent" label="转接内容"></el-table-column>
								<el-table-column min-width="110" prop="tphone" label="转接号码1"></el-table-column>
								<el-table-column min-width="110" prop="tphonetwo" label="转接号码2"></el-table-column>
							</el-table>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==1||obj.business_type==9">
					<div class="form-item" v-if="obj.business_type==9">
						<p class="form-item-title">手机号码：</p>
						<div class="form-item-content">
							<span class="detail-info2">{{obj.remindphone}}</span>
						</div>
					</div>
					<div class="form-item" v-if="!obj.contentold">
						<p class="form-item-title">短信内容：</p>
						<div class="form-item-content">
							<p class="detail-info2" style="width: 400px;line-height: 24px;padding-top: 6px;">{{obj.content}}</p>
						</div>
					</div>
					<template v-if="obj.contentold">
						<div class="form-item">
							<div style="line-height: 24px;padding-top: 6px;" class="form-item-title" >
								短信内容：
								<p style="padding-right: 14px;color: #999;line-height: 18px;">(修改前)</p>
							</div>
							<div class="form-item-content">
								<p class="detail-info2" style="width: 400px;line-height: 24px;padding-top: 6px;">{{obj.contentold}}</p>
							</div>
						</div>
						<div class="form-item">
							<div style="line-height: 24px;padding-top: 6px;" class="form-item-title" >
								短信内容：
								<p style="padding-right: 14px;color: #999;line-height: 18px;">(修改后)</p>
							</div>
							<div class="form-item-content">
								<p class="detail-info2" style="width: 400px;line-height: 24px;padding-top: 6px;">{{obj.content}}</p>
							</div>
						</div>
					</template>
				</template>
				<div class="form-item" v-if="obj.business_type==12">
					<p class="form-item-title">总机号码：</p>
					<div class="form-item-content">
						<span class="detail-info2">{{obj.mainphone}}</span>
					</div>
				</div>
				<span class="edit-btn" v-if="[1,3].indexOf(obj.order_status_num)>-1&&[1,2,3,4,6,7,9,12].indexOf(obj.business_type)>-1" @click="editOrder">编辑</span>
			</div>
			<div class="dialog-btn-wrap text-center">
				<el-button type="primary" @click="detailVisible=false">关 闭</el-button>
			</div>
		</el-dialog>
		
		<el-dialog :title="'编辑'+obj.business_name" :visible.sync="editVisible" width="600px">
			<div class="dialog-content">
				<div class="form-item">
					<p class="form-item-title">订购业务：</p>
					<div class="form-item-content">
						<span>{{obj.business_name}}</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type==1||obj.business_type==9">
					<p class="form-item-title">功能费：</p>
					<div class="form-item-content">
						<div>{{obj.functionfee?24:0}}元<span class="red">（400开通首年，功能费0元；次年收取24元/年）</span></div>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">产品价格：</p>
					<div class="form-item-content">
						<span v-if="obj.business_type!=1&&obj.business_type!=9">{{obj.fee/100}}元/年</span>
						<span v-else>{{gjTypeList[editObj.gj_type-1]}}</span>
					</div>
				</div>
				<template v-if="obj.business_type==2||obj.business_type==4">
					<div class="form-item">
						<p class="form-item-title">铃音文件：</p>
						<div class="form-item-content" style="width: 330px;">
							<div class="flex flex-align-center flex-justify-between">
								<el-input type="text" style="width: 180px;" placeholder="请选择铃音文件" readonly v-model="editObj.ring_file_name"></el-input>
								<el-button type="primary" size="small" style="width: 140px;margin-left: 6px;" @click="selectFile">点击上传铃音文件
									<input @change="upload" accept=".mp3" type="file" ref="file" class="hide"/>
								</el-button>
							</div>
							<p class="tip-info">支持扩展名：MP3</p>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">彩铃内容：</p>
						<div class="form-item-content" style="width: 330px;padding-top: 11px;">
							<el-input type="textarea" placeholder="请输入彩铃内容" rows="4" resize="none" v-model="editObj.content"></el-input>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title" style="line-height: 20px;padding-top: 8px;">资质文件：<br/>(非必填)</p>
						<div class="form-item-content" style="padding-top: 8px;">
							<image-uploader ref="zz_file" :imageUrl="editObj.zz_file" @success="(img)=>{imageUploadSuccess(img)}" :fileSizeLimit="500" class="upload-wrapper" accept=".png,.jpg">
								<div class="upload-bg" v-if="!editObj.zz_file">
									
								</div>
								<template v-if="editObj.zz_file">
									<div class="operate-wrap flex flex-align-center flex-justify-arround">
										<img :src="change" @click="changeFile()" />
										<img :src="del" @click="delFile()" />
									</div>
								</template>
							</image-uploader>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==3||obj.business_type==6||obj.business_type==7">
					<div class="form-item">
						<p class="form-item-title">致电导语：</p>
						<div class="form-item-content" style="width: 330px;padding-top: 11px;">
							<el-input type="textarea" placeholder="请输入内容" rows="4" resize="none" v-model="editObj.content"></el-input>
							<p class="tip-info">例如：欢迎致电***公司，咨询业务请按1，订购产品请按2…</p>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title" style="color: red;">说明：</p>
						<div class="form-item-content" style="color: red;">
							开通语音导航前，请先开通基础彩铃功能
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">转接设置：</p>
						<div class="form-item-content" style="width: 440px;">
							<el-table class="speakset-table" size="mini"border :data="speakset" style="width: 100%">
								<el-table-column prop="tnum" width="60px" label="按键号">
									<template slot-scope="scope">
										<el-input placeholder="请输入" size="mini" v-model="speakset[scope.$index].tnum"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tcontent" min-width="110px" label="转接内容">
									<template slot-scope="scope">
										<el-input placeholder="请输入转接内容" size="mini" v-model="speakset[scope.$index].tcontent"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tphone" min-width="110px" label="转接号码1">
									<template slot-scope="scope">
										<el-input placeholder="请输入手机号" size="mini" v-model="speakset[scope.$index].tphone"></el-input>
									</template>
								</el-table-column>
								<el-table-column prop="tphonetwo" min-width="110px" label="转接号码2">
									<template slot-scope="scope">
										<el-input placeholder="请输入手机号" size="mini" v-model="speakset[scope.$index].tphonetwo"></el-input>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="40px">
									<template slot-scope="scope">
										<el-button size="mini" v-if="scope.$index>0" type="text" @click="delNumber(scope.$index)">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
							<span class="edit-btn"  @click="addNumber">添加</span>
						</div>
					</div>
				</template>
				<template v-if="obj.business_type==1||obj.business_type==9">
					<div class="form-item" v-if="obj.order_status_num==1">
						<p class="form-item-title">短信套餐：</p>
						<div class="form-item-content">
							<div class="clear">
								<span class="package-item" @click="gjTypeChange(index)" :class="editObj.gj_type==(index+1)?'selected-item':''" v-for="(item,index) in gjTypeList">{{item}}</span>
							</div>
						</div>
					</div>
					<div class="form-item" v-if="obj.business_type==9">
						<p class="form-item-title">手机号码：</p>
						<div class="form-item-content">
							<el-input placeholder="请输入手机号码" v-model="editObj.remindphone"></el-input>
						</div>
					</div>
					<div class="form-item">
						<p class="form-item-title">短信内容：</p>
						<div class="form-item-content" style="width: 450px;padding-top: 11px;">
							<div class="template-list">
								<p class="template-item" :class="templateIndex===0?'selected-item':''" @click="selectTemplate(0)" v-if="editObj.business_type==1&&type==1">
									{{companyName}}，感谢您的来电，我们将继续为您提供最优质的服务，谢谢！地址<el-input show-word-limit :maxlength="addressLength" v-model="address" size="mini" style="width:160px;display: inline-block;margin: 0 4px;" placeholder="请输入公司地址"></el-input>。服务热线:{{tel}}，退订回T。
								</p>
								<p class="template-item" :class="templateIndex===index?'selected-item':''" @click="selectTemplate(index)" v-if="(editObj.business_type==1&&type==2)||(editObj.business_type==1&&type==1&&index>0)" v-for="(item,index) in gdTemplateList[type-1]">
									{{item}}
								</p>
								<p class="template-item" :class="templateIndex===index?'selected-item':''" @click="selectTemplate(index)" v-if="editObj.business_type==9" v-for="(item,index) in ldTemplateList[type-1]">
									{{item}}
								</p>
							</div>
						</div>
					</div>
				</template>
				<div class="form-item" v-if="obj.business_type==12">
					<p class="form-item-title">总机号码：</p>
					<div class="form-item-content">
						<el-input placeholder="请输入总机号码" v-model="editObj.mainphone"></el-input>
					</div>
				</div>
			</div>
			<div class="dialog-btn-wrap text-center">
				<el-button type="default" @click="editVisible=false">取 消</el-button>
				<el-button type="primary" @click="confirmEdit">{{obj.order_status_num==1?'提交支付':'确 认'}}</el-button>
			</div>
		</el-dialog>
		
		
		<el-dialog title="申诉" :visible.sync="appealVisible" width="600px">
			<div class="dialog-content">
				<div class="clear">
					<div class="form-item left" style="width: 60%;">
						<p class="form-item-title">订单编号：</p>
						<div class="form-item-content">
							<span>{{obj.ordernum}}</span>
						</div>
					</div>
					<div class="form-item left" style="width: 40%;">
						<p class="form-item-title">400号码：</p>
						<div class="form-item-content">
							<span>{{fourhundred_tel_num}}</span>
						</div>
					</div>
				</div>
				<div class="clear">
					<div class="form-item left" style="width: 60%;">
						<p class="form-item-title">业务名称：</p>
						<div class="form-item-content">
							<span>{{obj.business_name}}</span>
						</div>
					</div>
					<div class="form-item left" style="width: 40%;">
						<p class="form-item-title">支付价格：</p>
						<div class="form-item-content">
							<span>{{(obj.realfee||0)/100}}元</span>
						</div>
					</div>
				</div>
				<p class="text-center red" style="line-height: 36px;">请写明申诉原因，客服将在24小时内进行回复</p>
				<el-input type="textarea" placeholder="请输入内容" rows="6" resize="none" v-model="appeal_desc">
				</el-input>
			</div>
			<div class="dialog-btn-wrap text-center">
				<el-button type="default" @click="appealVisible=false">取 消</el-button>
				<el-button type="primary" @click="confirmAppeal">提 交</el-button>
			</div>
		</el-dialog>
		<el-dialog class="pay-dialog" title="支付" top="30vh" :visible.sync="payVisible" width="360px">
			<div class="dialog-content">
				
				<div class="form-item">
					<p class="form-item-title">订购业务：</p>
					<div class="form-item-content">
						{{obj.business_name}}
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type==1||obj.business_type==9">
					<p class="form-item-title">功能费：</p>
					<div class="form-item-content">
						<span v-if="!obj.functionfee">0元</span>
						<span v-else>24元</span>
					</div>
				</div>
				<p class="red" v-if="obj.business_type==1||obj.business_type==9" style="font-size: 12px;margin-bottom: 4px;">(400开通首年，功能费0元；次年收取24元/年)</p>
				<div class="form-item" v-if="obj.business_type==16">
					<p class="form-item-title">标准价格：</p>
					<div class="form-item-content">
						<p style="position: relative;">
							24元/年
						</p>
					</div>
				</div>
				<div class="form-item" v-if="obj.business_type!=16">
					<p class="form-item-title">{{obj.business_type!=1&&obj.business_type!=9?'标准价格：':'短信套餐：'}}</p>
					<div class="form-item-content">
						<span v-if="obj.business_type==1||obj.business_type==9">{{gjTypeList[obj.gj_type-1]}}</span>
						<p style="position: relative;" v-else>
							{{obj.fee/100}}元/年
						</p>
					</div>
				</div>
				<p class="red" v-if="[1,9,12,16].indexOf(obj.business_type)==-1&&feeMap[obj.business_type]" style="font-size: 12px;margin-bottom: 4px;">(400号码开通30天内订购{{feeMap[obj.business_type][0]}}元，30天后订购{{feeMap[obj.business_type][1]}}元)</p>
				<p class="red" v-if="obj.business_type==16" style="font-size: 12px;margin-bottom: 4px;">(400号码开通1年内订购0元，1年后订购24元)</p>
				<div class="form-item">
					<p class="form-item-title">订单金额：</p>
					<div class="form-item-content">
						<span>{{(obj.fee||0)/100}}元</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">优惠金额：</p>
					<div class="form-item-content">
						<span>{{discount/100}}元</span>
					</div>
				</div>
				<div class="form-item">
					<p class="form-item-title">实付金额：</p>
					<div class="form-item-content">
						<span class="red">{{((obj.fee||0)-discount)/100}}元</span>
					</div>
				</div>
				<div class="form-item" v-if="obj.fee>0">
					<p class="form-item-title edit-btn" @click="selectCouponVisible=true" style="width: auto;">使用代金券或者抵扣券</p>
				</div>
			</div>
			<div class="dialog-btn-wrap text-center">
				<el-button type="default" @click="payVisible=false">取 消</el-button>
				<el-button type="primary" @click="confirmPay">支 付</el-button>
			</div>
		</el-dialog>
		<coupon ref="coupon" style="z-index: 99999;" :id="ticketuid" :show="selectCouponVisible" @closeCoupon="closeCoupon" @select="selectCoupon"></coupon>
		<view-img :src="imgSrc" v-if="showImg" @close="closeImg"></view-img>
	</div>
</template>

<script>
	import change from '@/assets/images/change.png'
	import del from '@/assets/images/del.png'
	import cancelIcon from '@/assets/images/400Tel/delete.svg'
	import detail from '@/assets/images/400Tel/detail.svg'
	import appeal from '@/assets/images/400Tel/appeal.svg'
	import renew from '@/assets/images/400Tel/renew.svg'
	import reOrderIcon from '@/assets/images/400Tel/reorder.svg'
	
	import NoData from '@/components/NoData'
	import Coupon from '@/components/Coupon'
	import ImageUploader from '@/components/ImageUploader'
	import { phoneReg,deepClone,getURLQueryString} from '@/utils/common'
	export default {
		name: 'ValueAddedService',
		components: {
			NoData,
			Coupon,
			ImageUploader,
		},
		data() {
			return {
				change,
				del,
				cancelIcon,
				detail,
				appeal,
				renew,
				reOrderIcon,
				
				tel:'',
				companyName:'',
				address:'',
				templateIndex:'',
				fourhundred_tel_num: '',
				network: false,
				loading: false,
				uploading:false,
				detailVisible: false,
				editVisible: false,
				appealVisible: false,
				payVisible: false,
				selectCouponVisible:false,
				appeal_desc: '', //申诉内容
				totalCount: 0,
				discount:0,
				ticketuid:'',
				type:getURLQueryString('source'),
				payIndex:'',
				feeMap:{
					2:[0,12],
					3:[0,48],
					4:[24,48],
					5:[24,48],
					6:[24,48],
					7:[24,48],
					8:[24,48],
					10:[24,48],
					11:[24,48],
					13:[24,48],
					14:[24,48],
					15:[24,48],
				},
				gjTypeList:['100元/1600条','300元/5000条','500元/8300条'],
				gdTemplateList: [
					['【公司全称】，感谢您的来电，我们将继续为您提供最优质的服务，谢谢！地址【公司地址】。服务热线:【400号码】，退订回T。',
						'感谢您致电【公司全称】，咨询电话：【400号码】，退订回T。',
						'【公司全称】，感谢您的来电，我们将竭诚为您提供最优质的服务！服务热线:【400号码】，退订回T。'
					],
					['感谢您的来电，谢谢!', '感谢您致电【公司全称】，我们以专心、专注、专业的态度为您服务，期待您成为我们的忠实客户！如需帮助，请致电：【400号码】'],
				],
				ldTemplateList: [
					['亲爱的【400号码】用户， 您错过了{主叫号码}在{拨打时间}给您的来电，退订回T！',
					'亲爱的【400号码】用户，{拨打时间}号码为{主叫号码}拨打您的电话，退订回T！',
					'亲爱的【400号码】用户，{主叫号码}在{拨打时间}给您来电未接，退订回T！',
					],
					['{主叫号码}电话于{拨打时间}致电我司400电话，来电漏接，请速联系。']
				],
				searchData: {
					pagenow: 1,
					shownum: 10,
					fourhundred_order_uid:getURLQueryString('fourhundred_order_uid')
				},
				obj: {},
				editObj:{
					ordernum: '',
					content: '',
					remindphone: '',
					ring_file: '',
					zz_file: '',
					ring_file_name: '',
					speakset: [],
					mainphone: '',
					changeflow: '1',
				},
				speakset: [],
				list: [],
				recordList: [],
			}
		},
		computed:{
			addressLength(){
				return 67-this.gdTemplateList[0][0].replace('【公司地址】','').length
			}
		},
		mounted() {
			this.getData()
			this.queryCompanyinfo()
		},
		methods: {
			pageSizeChange(pageSize) {
				this.searchData.shownum = pageSize
				this.getData()
			},
			currentPageChange(page) {
				this.searchData.pagenow = page
				this.getData()
			},

			getData() {
				console.log(this.searchData)
				this.loading = true
				this.$request.queryValueAddedList(this.searchData)
					.then(res => {
						if(res.code == 0) {
							this.list = res.orderlist
							this.fourhundred_tel_num = this.list[0] ? this.list[0].fourhundred_tel_num : ''
							this.totalCount = res.page.totalresult
							if(this.payIndex!==''){
								this.openPay(this.list[this.payIndex])
								this.payIndex=''
							}
						} else {
							this.msgError(res.msg)
						}
						this.loading = false
					})
			},
			selectTemplate(index){
				this.templateIndex=index
				if(this.editObj.business_type==1){
					this.editObj.content=this.gdTemplateList[this.type-1][index]
				}
				else{
					this.editObj.content=this.ldTemplateList[this.type-1][index]
				}
				console.log(this.templateIndex)
			},
			editOrder(){
				this.editObj=deepClone(this.obj)
				this.speakset=deepClone(this.editObj.speakset)
				this.editVisible=true
				this.templateIndex=''
				this.address=''
				for(var i=0;i<this.gdTemplateList.length;i++){
					for(var j=0;j<this.gdTemplateList[i].length;j++){
					 if(this.editObj.content==this.gdTemplateList[i][j]){
					 	this.templateIndex=j
					 }
					}
				}
				for(var i=0;i<this.ldTemplateList.length;i++){
					for(var j=0;j<this.ldTemplateList[i].length;j++){
					if(this.editObj.content==this.ldTemplateList[i][j]){
					 	this.templateIndex=j
					 }
					}
				}
			},
			selectFile(){
				if(this.uploading){
					return
				}
				this.$refs.file.value=''
				this.$refs.file.click()
			},
			upload(){
				var file=this.$refs.file.files[0]
				this.uploading = true
				var formData=new FormData()
				formData.append('file',file)
				this.$request.uploadFile(formData)
				.then(res=>{
					this.uploading = false
					if(res.code==0){
						var obj=res.objlist&&res.objlist[0]?res.objlist[0]:null
						if(!obj){
							this.msgError('上传失败')
							return
						}
						if(obj.code==0){
							console.log(this.editObj)
							var url=obj.uploadpath
							this.editObj.ring_file=url
							this.editObj.ring_file_name=file.name
						}else{
							this.msgError(obj.msg)
						}
					}else{
						this.msgError(res.msg)
					}
				})
				
			},
			imageUploadSuccess(img) {
				if(img.code == 0) {
					this.editObj.zz_file= img.uploadpath
				}
			},
			changeFile() {
				this.$refs.zz_file.selectFile()
			},
			delFile() {
				this.editObj.zz_file=''
			},
			delNumber(index){
				this.speakset.splice(index,1)
			},
			addNumber(){
				this.speakset.push({
					tnum:'',
					tcontent:'',
					tphone:'',
					tphonetwo:''
				})
			},
			
			confirmEdit(){
				if(this.network){
					return
				}
				if((this.editObj.business_type == 1 || this.editObj.business_type == 9) && !this.editObj.content) {
					this.msgError('请选择短信模板')
					return
				}
				if(this.editObj.business_type == 1 &&this.type==1&&this.templateIndex===0&&!this.address) {
					this.msgError('请输入公司地址')
					return
				}
				this.editObj.content=this.editObj.content.replace('【公司地址】',this.address)
				if(this.editObj.business_type==9&&!this.editObj.remindphone){
					this.msgError('请输入漏电短信提醒号码')
					return
				}
				if(this.editObj.business_type==9&&!phoneReg.test(this.editObj.remindphone)){
					this.msgError('漏电短信提醒号码格式错误')
					return
				}
				if((this.editObj.business_type==2||this.editObj.business_type==4)&&!this.editObj.ring_file){
					this.msgError('请上传铃音文件')
					return
				}
				if((this.editObj.business_type==2||this.editObj.business_type==4)&&!this.editObj.content){
					this.msgError('请输入彩铃内容')
					return
				}
				if((this.editObj.business_type==3||this.editObj.business_type==6||this.editObj.business_type==7)&&!this.editObj.content){
					this.msgError('请输入致电导语')
					return
				}
				if(this.editObj.business_type==3||this.editObj.business_type==6||this.editObj.business_type==7){
					for(var i=0;i<this.speakset.length;i++){
						console.log(this.speakset[i])
						if(this.speakset[i].tnum===''||this.speakset[i].tcontent===''||!this.speakset[i].tphone){
							this.msgError('请完整填写转接设置内容')
							return
						}
						if(!/^\d$/.test(this.speakset[i].tnum)){
							this.msgError('按键号需为0-9的数字')
							return
						}
						if(!/^\d{6,}$/.test(this.speakset[i].tphone)){
							this.msgError('转接号码'+this.speakset[i].tphone+'格式错误')
							return
						}
						if(this.speakset[i].tphonetwo&&!/^\d{6,}$/.test(this.speakset[i].tphonetwo)){
							this.msgError('转接号码'+this.speakset[i].tphonetwo+'格式错误')
							return
						}
					}
					
					this.editObj.speakset=JSON.stringify(this.speakset)
				}
				if(this.editObj.business_type==12&&!this.editObj.mainphone){
					this.msgError('请输入总机号码')
					return
				}
				this.editObj.changeflow=this.reOrderFlag?2:1
				this.network=true
				console.log(this.editObj)
				this.$request.editValueAddedOrder(this.editObj)
				.then(res=>{
					if(res.code==0){
						this.detailVisible=false
						this.editVisible=false
						if(this.payIndex===''){
							this.msgSuccess('编辑成功')
						}
						this.getData()
					}else{
						this.msgError(res.msg)
					}
					this.network=false
				})
			},
			goOrder() {
				this.$router.push('/400tel/valueaddedorder')
			},
			seeDetail(obj,index) {
				if(obj.order_status_num==1){
					this.payIndex=index
				}else{
					this.payIndex=''
				}
				this.obj = {}
				this.reOrderFlag=false
				this.$request.queryValueAddedOrderDetail({
					ordernum: obj.ordernum
				}).then(res => {
					if(res.code == 0) {
						this.obj = res.orderinfo
						if(res.orderinfo.speakset && res.orderinfo.speakset != '[null]') {
							this.obj.speakset = JSON.parse(res.orderinfo.speakset)
						}
						this.recordList = res.orderflowinfo
						this.detailVisible = true
					}
				})
			},
			openPay(obj) {
				this.obj = deepClone(obj)
				this.discount=0
				this.ticketuid=''
				this.payVisible = true
			},
			selectCoupon(coupon){
				this.discount=coupon.discount_ticket_price
				this.ticketuid=coupon.discount_myticket_uid
			},
			closeCoupon(){
				this.selectCouponVisible=false
			},
			confirmPay() {
				if(this.network) {
					return
				}
				this.network=true
				this.$request.payValueAddedOrder({
					ordernum: this.obj.ordernum,
					ticketuid:this.ticketuid
				}).then(res => {
					if(res.code == 0) {
						this.payVisible = false
						this.msgSuccess('支付成功')
						this.getData()
					} else {
						this.msgError(res.msg)
					}
					this.network=false
				})
			},
			openAppeal(obj) {
				this.obj = deepClone(obj)
				this.appeal_desc=''
				this.appealVisible = true
			},
			confirmAppeal() {
				if(this.network) {
					return
				}
				if(!this.appeal_desc) {
					this.msgError('请填写申诉原因')
					return
				}
				this.network=true
				this.$request.appealValueAddedOrder({
					ordernum: this.obj.ordernum,
					appeal_desc: this.appeal_desc
				}).then(res => {
					if(res.code == 0) {
						this.appealVisible = false
						this.msgSuccess('操作成功')
						this.getData()
					} else {
						this.msgError(res.msg)
					}
					this.network=false
				})
			},
			gjTypeChange(index){
				this.editObj.gj_type=index+1
			},
			reOrder(obj){
				if(this.network){
					return
				}
				
				//无可编辑内容的直接提交编辑
				if([5,8,10,11,13,14,15].indexOf(obj.business_type)>-1){
					this.editObj.changeflow=this.reOrderFlag?2:1
					this.network=true
					this.$request.editValueAddedOrder({
						ordernum:obj.ordernum,
						changeflow:2,
					})
					.then(res=>{
						if(res.code==0){
							this.msgSuccess('操作成功')
							this.getData()
						}else{
							this.msgError(res.msg)
						}
						this.network=false
					})
					return
				}
				
				this.obj = {}
				this.reOrderFlag=true
				this.$request.queryValueAddedOrderDetail({
					ordernum: obj.ordernum
				}).then(res => {
					if(res.code == 0) {
						this.obj = res.orderinfo
						if(res.orderinfo.speakset && res.orderinfo.speakset != '[null]') {
							this.obj.speakset = JSON.parse(res.orderinfo.speakset)
						}
						this.recordList = res.orderflowinfo
						this.editObj=deepClone(this.obj)
						this.speakset=deepClone(this.editObj.speakset)
						this.editVisible=true
					}
				})
			},
			cancel(obj) {
				if(this.network) {
					return
				}
				this.network=true
				this.$request.cancelValueAddedOrder({
					ordernum:obj.ordernum,
				}).then(res => {
					if(res.code == 0) {
						this.msgSuccess('操作成功')
						this.getData()
					} else {
						this.msgError(res.msg)
					}
					this.network=false
				})
			},
			queryCompanyinfo(){
				this.$request.queryCompanyinfo({
					fourhundred_order_uid: getURLQueryString('fourhundred_order_uid'),
				}).then(res => {
					if(res.code == 0) {
						this.companyName=res.company_name
						this.tel=res.fourhundred_tel_num
						for(var i=0;i<this.gdTemplateList.length;i++){
							for(var j=0;j<this.gdTemplateList[i].length;j++){
							this.gdTemplateList[i][j]=this.gdTemplateList[i][j].replace('【公司全称】',this.companyName).replace('【400号码】',this.tel)
							}
						}
						for(var i=0;i<this.ldTemplateList.length;i++){
							for(var j=0;j<this.ldTemplateList[i].length;j++){
							this.ldTemplateList[i][j]=this.ldTemplateList[i][j].replace('【公司全称】',this.companyName).replace('【400号码】',this.tel)
							}
						}
					}
				})
			},
		}
	}
</script>

<style scoped="" lang="scss">
	.page {
		.group-info {
			height: 73px;
			border-bottom: 1px solid #f5f5f5;
			font-size: 14px;
			padding: 0 12px;
			.title {
				font-size: 18px;
				color: #555;
			}
			.link {
				color: #409EFF;
				text-decoration: underline;
				margin-right: 30px;
			}
		}
		.search-wrap {
			padding: 24px 10px 8px;
			margin-bottom: 10px;
		}
		>>>.el-table {
			th {
				>.cell {
					text-align: center;
				}
			}
			td {
				>.cell {
					text-align: center;
					.operate-icon {
						width: 22px;
						height: 22px;
						float: left;
						margin-right: 20px;
						cursor: pointer;
						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
	
	>>>.el-dialog__body {
		padding: 16px 16px 20px;
		.dialog-content {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			min-height: 300px;
			padding: 10px 20px;
			.tip-info {
				font-size: 12px;
				color: red;
				line-height: 24px;
			}
			.edit-btn{
				line-height: 36px;
				color: #409EFF;
    			text-decoration: underline;
    			cursor: pointer;
			}
			.record-list {
				max-height: 130px;
				overflow: auto;
				.record-item {
					height: 26px;
					line-height: 26px;
					font-size: 12px;
				}
			}
			.form-item {
				display: block;
				margin-right: 0;
				margin-bottom: 0;
				.form-item-title {
					width: 78px;
					line-height: 36px;
					text-align: left;
				}
				.form-item-content {
					width: auto;
					color: #333;
					line-height: 36px;
					.discount-tag{
						width: 46px;
						height: 16px;
						text-align: center;
						background: red;
						border-radius: 3px;
						font-size: 12px;
						color: #fff;
						font-weight: normal;
						position: relative;
						line-height: 16px;
						position: absolute;
						left: 55px;
						top: 5px;
						&:after{
							content: '';
							width: 0;
							height: 0;
							border-right: 3px solid red;
							border-top:3px solid transparent;
							border-bottom: 3px solid transparent;
							position: absolute;
							left: -3px;
							bottom: 4px;
							
						}
					}
					.template-list{
						.template-item{
							border: 1px solid #eee;
							border-radius: 4px;
							padding:5px 12px;
							font-size: 14px;
							color: #666;
							line-height: 24px;
							cursor: pointer;
							margin-bottom: 12px;
							transition: all .3s;
						}
						.selected-item{
							background: 1px solid #0088EA;
							border: 1px solid #0088EA;
							color: #fff;
						}
					}
					.detail-info2 {
						color: #666;
					}
					.speakset-table{
						margin-top: 8px;
						.cell{
							padding: 0 4px;
							text-align: center;
							.el-input__inner{
								padding-left: 4px;
							}
						}
					}
					.package-item{
						width: 120px;
						height: 36px;
						background: #FFFFFF;
						border: 1px solid #ADADAD;
						border-radius: 2px;
						text-align: center;
						line-height: 34px;
						font-size: 14px;
						color: #333;
						cursor: pointer;
						float: left;
						margin-right: 20px;
					}
					.selected-item{
						color: #fff;
						background: #0088EA;
						border: 1px solid #0088EA;
					}
					.img-wrap {
						width: 100px;
						height: 100px;
						background: #F1F1F1;
						img {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
					
					.upload-wrapper {
						width: 80px;
						height: 80px;
						background: #F1F1F1;
						position: relative;
						
						>img {
							width: 100%;
							height: 100%;
						}
						.upload-bg {
							width: 100%;
							height: 100%;
							background: url(../../assets/images/400Tel/myadd.png) center no-repeat;
							background-size: 18px 18px;
							border: 1px dashed #ADADAD;
							.img-tip{
								color: #ccc;
								font-size: 14px;
								line-height: 20px;
								padding-top: 12px;
								text-align: center;
							}
							
						}
						.upload-cover{
							border: none;
						}
						&:hover {
							.operate-wrap {
								display: flex;
							}
						}
						.operate-wrap {
							position: absolute;
							width: 100%;
							height: 24px;
							left: 0;
							bottom: 0;
							background: rgba(255, 0, 0, 0.8);
							opacity: 0.8;
							display: none;
							padding: 0 10px;
						}
						.operate-wrap .operate {
							width: 20px;
							height: 20px;
							cursor: pointer;
						}
					}
				}
			}
			.use-coupon {
				text-align: center;
				color: #409EFF;
				text-decoration: underline;
				line-height: 32px;
				cursor: pointer;
				font-size: 14px;
			}
		}
		.dialog-btn-wrap {
			padding-top: 20px;
		}
	}
	.pay-dialog{
		.dialog-content{
			min-height: auto;
			.form-item-content{
				font-weight: bold;
			}
		}
		
	}
</style>